<template>
    <div class="p-2">
        <el-row :gutter="20">
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="clearfix">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <div>
                        <div class="text-center">
                            <userAvatar />
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <el-icon><UserFilled /></el-icon>账号
                                <div class="pull-right">{{ state.user.userName }}</div>
                            </li>
                            <li class="list-group-item">
                                <el-icon><PhoneFilled /></el-icon>手机号码
                                <div class="pull-right">{{ state.user.phonenumber }}</div>
                            </li>
                            <li class="list-group-item">
                                <el-icon><Message /></el-icon>用户邮箱
                                <div class="pull-right">{{ state.user.email }}</div>
                            </li>
                            <li class="list-group-item">
                                <el-icon><Grid /></el-icon>所属部门
                                <div v-if="state.user.deptName" class="pull-right">
                                    {{ state.user.deptName }} / {{ state.postGroup }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <el-icon><Avatar /></el-icon>所属角色
                                <div class="pull-right">{{ state.roleGroup }}</div>
                            </li>
                            <li class="list-group-item">
                                <el-icon><Calendar /></el-icon>创建日期
                                <div class="pull-right">{{ state.user.createTime }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18" :xs="24">
                <el-card>
                    <template #header>
                        <div class="clearfix">
                            <span>基本资料</span>
                        </div>
                    </template>
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="基本资料" name="userinfo">
                            <userInfo :user="userForm" />
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <resetPwd />
                        </el-tab-pane>
                        <el-tab-pane label="第三方应用" name="thirdParty">
                            <thirdParty v-if="activeTab == 'thirdParty'" />
                        </el-tab-pane>
                        <el-tab-pane label="在线设备" name="onlineDevice">
                            <onlineDevice v-if="activeTab == 'onlineDevice'" />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="Profile" lang="ts">
import UserAvatar from './userAvatar.vue';
import UserInfo from './userInfo.vue';
import ResetPwd from './resetPwd.vue';
import ThirdParty from './thirdParty.vue';
import OnlineDevice from './onlineDevice.vue';
import type { UserVO } from '@great/services';
import { systemUserService } from '@great/services';
import { Avatar, Calendar, Grid, Message, PhoneFilled, UserFilled } from '@element-plus/icons-vue';

const activeTab = ref('userinfo');
interface State {
    user: Partial<UserVO>;
    roleGroup: string;
    postGroup: string;
    auths: any;
    devices: any;
}
const state = ref<any>({
    user: {},
    roleGroup: '',
    postGroup: '',
    auths: [],
    devices: []
});

const userForm = ref({});

const getUser = async () => {
    const res = await systemUserService.getUserProfile();
    state.value.user = res.data.user;
    userForm.value = { ...res.data.user };
    state.value.roleGroup = res.data.roleGroup;
    state.value.postGroup = res.data.postGroup;
};

onMounted(() => {
    getUser();
});
</script>
<style lang="scss" scoped>
.text-center {
    text-align: center;
}
.el-icon {
    margin-right: 5px;
}
</style>
